<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("indexImage/background.jpg");
            background-repeat: no-repeat;
            width: 100%;
        }
        .el-menu--horizontal>.el-menu-item.is-active {
            border-bottom: 0;
            color: #ff6d24;
        }
        .el-menu a {
            font-size: 18px;
            text-decoration: none;
        }

        #logoright * {
            color: white;
            float: right;
            margin-top: 20px;
        }

        #login {
            margin-top: 22px;
        }

        .logo {
            float: left;
            width: 100px;
            display: block;
            height: 58px;
            background: url("indexImage/logo.jpg") no-repeat;
            background-size: 100%;
            background-position-y: 0px;
        }

        .logo:hover {
            overflow: hidden;
            background-position-y: -60px;
        }

        .dl:hover {
            background-color: #ff6d24;
            font-size: 30px;
            width: 80px;
            height: 45px;
            border-radius: 4px;
            margin-top: 10px;
            margin-left: 10px;
            text-align: center;
            box-shadow: 2px 2px 3px #ff6d24;
        }

        .main1 {
            width: 1200px;
            height: 269px;
            background-color: white;
            border-radius: 10px;
            border: 0 solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
        }

        .search-box {
            display: inline-block;
            background-color: #ff6d24;
            color: white !important;
            position: absolute;
            height: 37px;
            width: 200px;
            border-radius: 10px;
            padding: 5px;
        }

        .search-btn1 {
            position: relative;
            margin-left: 145px;
            bottom: 40px;
        }

        .el-autocomplete input {
            background-color: rgba(0, 0, 0, 0);
            border: 0px;
            color: white;
        }

        .el-autocomplete input::placeholder {
            color: white;
        }
        .fontBtn a:hover{
            color: #ff6d24;
        }
        .font1 {
            height: 36px;
            padding: 50px 0 0 50px;
        }

        .font1 a {
            font-size: 16px;
            text-decoration: none;
            color: black;
            padding: 10px;
        }

        .font2 {
            margin-top: 10px;
            width: 700px;
            height: 40px;
        }

        .font2 a {
            margin-left: 10px;
            font-size: 15px;
            text-decoration: none;
            color: black;
            padding: 8px;
        }

        .font3 {
            padding-left: 60px;
        }

        .font3 a {
            margin-left: 10px;
            font-size: 14px;
            text-decoration: none;
            color: black;
            padding: 18px;
        }

        .fontBtn img {
            width: 18px;
        }
        .carLogo {
            margin-top: -17px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #b2bec3;
        }
        .el-dropdown-link:hover{
            color: #ff6d24;
        }
        .font4 a{
            text-decoration: none;
            color: black;
            font-size: 14px;
        }
        .el-input__inner:focus{
            border-color: #ff6d24;
        }
        .saleCarBtn{
            width: 115px;
            height: 40px;
            float: left;
            text-align: center;
            line-height: 40px;
            background: #FF6B23;
            border-radius: 1px 4px 4px 1px;
            color: #fff;
            font-size: 18px;
            border: none;
            margin: -130px 0 0 301px;
            font-weight: 400;
            cursor: pointer;
        }
        .saleCarBtn:hover{
            background-color: #d35400;
        }
        .saleCar-img{
            width: 400px;
            height: 61px;
            position:relative;
            top: 30px;
        }
        .saleCar-img:hover{
            cursor: pointer;
            border-radius: 100px;
            box-shadow: 0 5px 15px #bdc3c7;
        }
        .main2{
            width: 1200px;
            height: 25px;
            margin: 0 auto;
            margin-top: -200px;
        }
        .main2content-service{
            float: left;
            width: 299px;
            height: 120px;
            text-align: center
        }
        .main2content{
            box-sizing: border-box;
            width: 100%;
            height: 164px;
            margin-top: 60px;
            padding: 30px 1px 14px;
            background-image: url(//img2.rrcimg.com/dist/pc/images/index/service-bg-654855d3.png);
            background-size: cover;
        }
        .service-item-main2{
            font-size: 16px;
            line-height: 16px;
            margin-top: 10px;
            color: #8c5313;
            cursor: pointer;
            text-decoration: none;
        }
        .service-item-main2-subtitle{
            font-size: 14px;
            line-height: 14px;
            margin-top: 10px;
            color: rgba(140,83,19,.6);
        }
        .main2content-service-img{
            width: 52px;
            margin: 3px auto 0;
            display: block;
            cursor: pointer;
        }
        .guide-item{
            width: 397px;
            height: 457px;
        }
        .guide-item-title{
            width: 1200px;
            font-size: 22px;
            height: 29px;
            color: rgba(0,0,0,.8);
            text-shadow: 0 0 1px rgba(140,83,19,.6),0 0 2px rgba(140,83,19,.6),0 0 1px rgba(140,83,19,.6),0 0 1px rgba(140,83,19,.6);
        }
        .guide-item-content{
            margin-top: 28px;
            width: 1200px;
            height: 400px;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
            color: #5b5d71;
            display: flex;
        }
        .guide-item-content-head{
            box-sizing: border-box;
            height: 139px;
            overflow: hidden;
            position: relative;
            /* 自动放大占满剩余空间 */
            flex: 1;
            transition: 1s;
        }
        .guide-item-content img{
            width: 390px;
            height: 100%;
            /* 保持原有尺寸比例，裁切长边 */
            background-size: cover;
            transition: 1s;
        }
        .guide-overlay{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: linear-gradient(to bottom,#F8F2E8,transparent);
            background-size: 100% 200%;
            background-position: 0 0;
            opacity: 1;
            transition: 0.5s;
        }
        .guide-item-content-head:hover .guide-item-content-head-img{
            /* 图片变大 */
            transform: scale(1.1);
        }
        .guide-item-content-head:hover .guide-overlay{
            /* 降低遮罩层的不透明度 */
            opacity: 0.4;
        }
        .guide-item-content-main{
            position: relative;
            top: -92px;
            margin-left: 39px;
            font-size: 28px;
            line-height: 28px;
        }
        .guide-item-content-more{
            position: relative;
            top: -60px;
            left: -90px;
            width: 112px;
            height: 23px;
            text-align: center;
            line-height: 23px;
            font-size: 12px;
            color: rgba(0,0,0,.36);
            text-decoration: none;
        }
        .guide-item-content-more:hover{
            color: rgba(0,0,0,.6);
            cursor: pointer;
        }
        .guide-car-series{
            box-sizing: border-box;
            width: 393px;
            background-color: #fff;
            position: relative;
        }
        .guide-car-series-item{
            border: 1px solid #F8F2E8;
            margin-top: -260px;
            float: left;
            width: 196px;
            height: 130px;
            text-align: center;
        }
        .car-series-item-box{
            box-sizing: border-box;
            display: block;
            width: 100%;
            height: 100%;
            padding-top: 42px;
            text-decoration: none;
        }
        .car-series-name{
            font-size: 16px;
            line-height: 21px;
            color: rgba(0,0,0,.6);
            transition: .2s;
            text-decoration: none;
        }
        .car-series-name:hover{
            color: #ff6d24;
        }
        .car-series-tag{
            font-size: 16px;
            line-height: 21px;
            margin-top: 5px;
            transition: .2s;
            color: #414e74;
        }
        .guide-car-series-item:hover .car-series-item-box{
            transform: scale(1.1);
        }

        .car-list-wrapper{
            width: 100%;
            height: 790px;
            background: #F8F8F8;
            margin-top: -190px;
            padding-top: 41px;
        }

        .car-list-container{
            width: 1200px;
            margin: 0 auto;
        }
        .car-list-container:before{
            line-height: 0;
            display: table;
            content: '';
        }
        .car-list-container-title{
            width: 1200px;
            height: 39px;
        }

        .list-container-title-font{
            font-size: 30px;
            text-decoration: none;
            color: #222;
            position: relative;
            top: 4px;
        }

        .el-menu-demo2{
            margin:-15px 0 0 40px;
            background-color: #F8F8F8;
        }
        .el-menu--horizontal>.el-menu-item.is-active{
            color: rgba(0,0,0,.6);
        }
        .el-menu--horizontal>.el-menu-item.is-active:hover{
            color: coral;
        }
        .el-menu--horizontal>.el-menu-item.is-active:focus{
            color: coral;
        }
        .el-menu.el-menu--horizontal{
            border-style: none;
        }

        .card-box{
            width: 290px;
            height: 331px;
            margin-bottom: 10px;
        }
        .card-box:hover{
            margin-top: -5px;
            box-shadow: 0 8px 15px 0 rgba(0,0,0,.15);
            cursor: pointer;
        }

        .card-box-time {
            font-size: 13px;
            color: #999;
        }

        .card-box-button {
            float: right;
        }

        .card-box-image {
            width: 100%;
            height: 192px;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .car-flow-box{
            width: 1200px;
            height: 350px;
            position: relative;
            margin-left: 300px;
            background-color: white;
        }
        .flow {
            display: flex;
            align-items: center;
            /* width: 300px; */
            height: 100%;
            /* height: 300px; */
            padding-left: 30px;
            position: absolute;
            overflow: hidden;
        }
        .flow .img {
            width: 1200px;
            height: 202px;
            border-radius: 20px;
            overflow: hidden;
            /* 防止被挤压 */
            flex-shrink: 0;
            margin: 0 auto;
        }
        .flow .img img {
            width: 100%;
            height: 100%;
            /* 图片默认隐藏 */
            opacity: 0;
            /* 过渡效果 */
            transition: 0.6s;
        }
        /* 通过单选框checked来显示指定图片 */
        #slide_1:checked ~ .flow-1 img,
        #slide_2:checked ~ .flow-2 img{
            opacity: 1;
            transition-delay: 0.2s;
        }

        .slider {
            position: absolute;
            bottom: 25px;
            left: 55%;
            transform: translateX(-50%);
            z-index: 1;
        }

        .slider .slide {
            width: 50px;
            height: 10px;
            background-color: #dfdfdf;
            display: inline-flex;
            margin: 0 3px;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .slider .slide::before {
            content: "";
            width: 0%;
            height: 100%;
            background-color: coral;
            border-radius: 5px;
            position: absolute;
            left: 0;
            top: 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s;
        }
        #slide_1:checked ~ .slider .slider-1::before,
        #slide_2:checked ~ .slider .slider-2::before{
            width: 100%;
            transform: scaleX(1);
        }

        * {
            /* 初始化 取消页面的内外边距 */
            padding: 0;
            margin: 0;
        }

        .end-show {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 700px;
            background-color: #F8F2E8;
        }

        .end-show-box{
            width: 70%;
            height: 500px;
            display: flex;
        }
        .end-show-content{
            flex: 1;
            overflow: hidden;
            transition: .5s;
            margin: 0 20px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
            border-radius: 20px;
            border: 10px solid #fff;
            background-color: #fff;
        }
        .end-show-content>img{
            width: 200%;
            height: 85%;
            object-fit: cover;
            transition: .5s;
        }
        .end-show-content>span{
            font: 200 45px '优设标题黑';
            text-align: center;
            height: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-shadow: 2px 3px 4px rgba(0, 0, 0, .5);
        }
        .end-show-content:hover{
            flex-basis: 40%;
        }
        .end-show-content:hover>img{
            width: 100%;
            height: 100%;
        }

        #r-footer {
            background-color: #4c4c4c;
            width: 100%;
            height: 400px;
        }

        .r-footer-container {
            width: 1200px;
            height: 320px;
            margin: 0 auto;

        }

        .baozhang {
            height: 74px;
            font-size: 16px;
            color: #fff;
            background-image: url("salecar_img/b1.png");
        }

        .link-clearfix {
            width: 1200px;
            height: 160px;
            margin: 40px auto;
        }

        .link-left {
            width: 758px;
            height: 123px;
            float: left;
        }
        .link-left a{
            text-decoration: none;
        }
        .link-left a:hover{
            color: #ff6d24;
        }

        .link-left_item {
            width: 300px;
            height: 123px;
            margin-bottom: 6px;
            display: inline-block;
            vertical-align: top;
        }

        .link-left_item-title {
            width: 234px;
            height: 21px;
            font-size: 16px;
            color: #fff;
            margin: 0 0 10px 0;
        }

        ul {
            display: inline-block;
            padding: 0;
            margin: 0 40px 0 0;
            vertical-align: top;
        }

        li {
            line-height: 24px;
            font-size: 14px;
            list-style: none;
        }

        li > a {
            color: #adadad;
        }

        .link-right{
            float: right;
            width: 440px;
            position: relative;
        }
        .link-right_tel{
            width: 160px;
            float: left;
            color: #fff;
        }
        .number{
            font-size: 22px;
            line-height: 34px;
            margin-top: 20px;
        }
        .time{
            font-size: 14px;
        }
        .text{
            font-size: 12px;
            line-height: 24px;
            margin: 5px 0 0;
            color: #979797;
        }
        .link-right_app{
            float: left;
            width: 272px;
            height: 136px;
        }
        .r-item{
            width: 88px;
            float: left;
            text-align: center;
            margin-left: 32px;
        }
        .r-item>span{
            color: #bbbbbb;
            padding-bottom: 8px;
            margin: 0 auto;
        }
        .lazyload{
            margin: 8px 0 24px 0;
            width: 88px;
            height: 88px;
        }
        .link-right_sns{
            display: block;
            float: left;
            width: 424px;
            height: 24px;
            background-image: url("salecar_img/sns1.png");
        }
        #r-footer-copyright{
            width: 100%;
            height: 80px;
            font-size: 12px;
            color: #fff;
            background-color: #2f2f2f;

        }
        .r-footer-copyright-container{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 1200px;margin: 0 auto;">
                <div style="float: left" class="logo">
                    <a href="index.html"></a>
                </div>
                <div style="float: left">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                             text-color="#0aa1ed">
                        <el-submenu index="2">
                            <template slot="title">地区</template>
                            <el-submenu index="2-1">
                                <template slot="title">宁波</template>
                                <el-menu-item index="2-1-1">海曙区</el-menu-item>
                                <el-menu-item index="2-1-2">江东区</el-menu-item>
                                <el-menu-item index="2-1-3">江北区</el-menu-item>
                                <el-menu-item index="2-1-4">镇海区</el-menu-item>
                                <el-menu-item index="2-1-5">北仑区</el-menu-item>
                                <el-menu-item index="2-1-6">鄞州区</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="3"><a href="buyCar.html" target="_blank">买车</a></el-menu-item>
                        <el-menu-item index="4"><a href="saleCar.html" target="_blank">卖车</a></el-menu-item>
                        <el-menu-item index="5"><a href="forumIndex.html" target="_blank">论坛</a></el-menu-item>
                        <el-menu-item index="6"><a href="serviceGuarantee.html" target="_blank">服务保障</a></el-menu-item>
                        <el-menu-item index="7"><a href="partner.html" target="_blank">加盟合伙人</a></el-menu-item>
                    </el-menu>
                </div>
                <div id="logoright" style="float: right">
                    <span>400-026-9017</span>
                    <el-divider direction="vertical"></el-divider>
                    <a href="/login.html" class="dl" style="text-decoration: none;position: relative;
                            top: -2px" id="login">登录</a>
                </div>
            </div>

        </el-header>
        <el-main>
            <div class="main1" style="margin: 230px auto;">
                <div style="background-color: white;width: 1200px;height: 36px;"></div>
                <div>
                    <a href="buyCar.html"><span><a style="text-decoration: none;margin: 10px 5px 0 50px;font-size: x-large;
                        color: #ff6d24;text-shadow: 1px 1px 1px #ff6d24;" href="byCar.html">我要买车!</a></span></a>
                    <div class="search-box">
                        <el-row class="demo-autocomplete">
                            <el-col :span="24">
                                <el-autocomplete
                                        class="inline-input"
                                        v-model="state1"
                                        :fetch-suggestions="querySearch"
                                        placeholder="请输入内容"
                                        :trigger-on-focus="false"
                                        @select="handleSelect"
                                        style="border:0px;"
                                ></el-autocomplete>
                                <div class="search-btn1">
                                    <el-button icon="el-icon-search"
                                               style="border: 0px;color:#FFFFFF;background-color: rgba(0,0,0,0);"@click="info()"></el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="fontBtn">
                        <div class="font1">
                            <a href="">3万以下</a>
                            <a href="">3-5万</a>
                            <a href="">5-10万</a>
                            <a href="">10-15万</a>
                            <a href="">15-20万</a>
                            <a href="">20-30万</a>
                            <a href="">30-60万</a>
                            <a href="">60万以上</a>
                        </div>
                        <div class="font2"><img style="padding-left: 60px;width: 60px;position: relative;top: 3px"
                                                src="https://img1.rrcimg.com/1562747510pc.png" alt="">
                            <a href="">降价车</a>
                            <a href="">准新车</a>
                            <a href="">急售车</a>
                            <a href="">紧凑型车</a>
                            <a href="">中大型车</a>
                            <a href="">豪华车</a>
                            <a href="">超值SUV</a>
                        </div>
                        <div class="font3">
                            <a href="">大众</a>
                            <a href="">别克</a>
                            <a href="">宝马</a>
                            <a href="">丰田</a>
                            <a href="">福特</a>
                            <a href="">本田</a>
                            <a href="">吉利汽车</a>
                        </div>
                        <div class="carLogo">
                            <img style="margin-left: 65px"
                                 src="https://busi.rrcimg.com/car-model-manage/brand/20_1644479532455@2x.png" alt="">
                            <img style="margin-left: 55px"
                                 src="https://busi.rrcimg.com/car-model-manage/brand/26_1644479531778@2x.png" alt="">
                            <img style="margin-left: 55px"
                                 src="https://busi.rrcimg.com/car-model-manage/brand/22_1644479529842@2x.png" alt="">
                            <img style="margin-left: 55px"
                                 src="https://busi.rrcimg.com/car-model-manage/brand/10_1644479533813@2x.png" alt="">
                            <img style="margin-left: 55px"
                                 src="https://busi.rrcimg.com/car-model-manage/brand/8_1644479534453@2x.png" alt="">
                            <img style="margin-left: 60px"
                                 src="https://busi.rrcimg.com/car-model-manage/brand/18_1644479531079@2x.png" alt="">
                            <img style="margin-left: 55px"
                                 src="https://busi.rrcimg.com/car-model-manage/brand/17_1644479537549@2x.png" alt="">
                            <div style="margin: -26px 0 0 625px;">
                                <el-row class="">
                                    <el-col :span="12">
                                        <el-dropdown>
                                            <span class="el-dropdown-link">
                                                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <div class="font4">
                                                    <el-dropdown-item><a href="">奔驰</a></el-dropdown-item>
                                                    <el-dropdown-item><a href="">阿尔法·罗密欧</a></el-dropdown-item>
                                                    <el-dropdown-item><a href="">奥迪</a></el-dropdown-item>
                                                    <el-dropdown-item><a href="">保时捷</a></el-dropdown-item>
                                                    <el-dropdown-item><a href="">野马</a></el-dropdown-item>
                                                </div>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 420px;height: 270px;margin: -192px 0 0 750px">
                    <div>
                        <a style="text-decoration: none;font-size: x-large;
                        color: #ff6d24;text-shadow: 1px 1px 1px #ff6d24;"href="saleCar.html">我要卖车!</a>
                    </div>
                    <div style="width: 300px;margin-top: 30px;">
                        <el-input
                                placeholder="请输入手机号"
                                v-model="input"
                                clearable>
                        </el-input>
                    </div>
                    <div class="saleCar">
                        <a href=""><div class="saleCarBtn">
                            卖车
                        </div></a>
                        <div>
                            <a href=""><img class="saleCar-img" style="" src="//img2.rrcimg.com/dist/pc/images/index/baomai-img-289fd832.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        <div class="main2">
            <div>
                <div style="float: left;font-size: 22px">
                    服务保障
                </div>
                <a href=""><div style="float: right;font-size: 16px;color: #a6a6a6;cursor: pointer;">
                    查看详情
                    <i class="el-icon-d-arrow-right"></i>
                </div></a>
            </div>
            <div class="main2content">
                <div class="main2content-service">
                    <a href=""><img class="main2content-service-img" src="" alt=""></a>
                    <a class="service-item-main2"href="">249项车况检测</a>
                    <p class="service-item-main2-subtitle">车况透明 更安心</p>
                </div>
                <div class="main2content-service">
                    <a href=""><img class="main2content-service-img" src="" alt=""></a>
                    <a class="service-item-main2"href="">90天可退</a>
                    <p class="service-item-main2-subtitle">重大事故 极速退车</p>
                </div>
                <div class="main2content-service">
                    <a href=""><img class="main2content-service-img" src="" alt=""></a>
                    <a class="service-item-main2"href="">1年2万公里质保</a>
                    <p class="service-item-main2-subtitle">全程保障 服务省心</p>
                </div>
                <div class="main2content-service">
                    <a href=""><img class="main2content-service-img" src="" alt=""></a>
                    <a class="service-item-main2"href="">2亿元用户保障金</a>
                    <p class="service-item-main2-subtitle">买的放心 开的舒心</p>
                </div>
            </div>
        </div>
        <div style="width: 1200px;margin:0 auto;">
            <div style="height: 457px;margin:270px auto;padding: 0">
                <div class="guide-item">
                    <div>
                        <div class="guide-item-title">
                            <a style="">上班一族首选</a>
                            <a style="margin-left: 260px">中产家庭之选</a>
                            <a style="margin-left: 260px">品质提升必备</a>
                        </div>
                        <div class="guide-item-content">
                            <div class="guide-item-content-head">
                                <a href=""><img class="guide-item-content-head-img" src="https://img1.rrcimg.com/tongqintongqin.png" alt=""></a>
                                <div class="guide-overlay"></div>
                                <a class="guide-item-content-main">通勤代步</a>
                                <a href="" class="guide-item-content-more">查看更多</a>
                            </div>
                            <div class="guide-item-content-head">
                                <a href=""><img class="guide-item-content-head-img" src="https://img1.rrcimg.com/jiameng.png" alt=""></a>
                                <div class="guide-overlay"></div>
                                <a class="guide-item-content-main">家有萌宝</a>
                                <a href="" class="guide-item-content-more">查看更多</a>
                            </div>
                            <div class="guide-item-content-head">
                                <a href=""><img class="guide-item-content-head-img" src="https://img1.rrcimg.com/liaomeiliaomei.png" alt=""></a>
                                <div class="guide-overlay"></div>
                                <a class="guide-item-content-main">撩妹必备</a>
                                <a href="" class="guide-item-content-more">查看更多</a>
                            </div>
                        </div>
                    </div>
                    <div class="guide-car-series">
                        <div class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">卡罗拉</p>
                                <p class="car-series-tag">空间充裕</p>
                            </a>
                        </div>
                        <div style="margin-left: 196px" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">速腾</p>
                                <p class="car-series-tag">节能典范</p>
                            </a>
                        </div>
                        <div style="position:relative;top: 130px" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">朗逸</p>
                                <p class="car-series-tag">外形时尚</p>
                            </a>
                        </div>
                        <div style="position:relative;top: 130px;left: 196px;" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">速腾</p>
                                <p class="car-series-tag">节能典范</p>
                            </a>
                        </div>
                    </div>
                    <div style="margin:-260px 0 0 397px" class="guide-car-series">
                        <div class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">宝马三系</p>
                                <p class="car-series-tag">魅力四射</p>
                            </a>
                        </div>
                        <div style="margin-left: 196px" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">宝马五系</p>
                                <p class="car-series-tag">运动科技</p>
                            </a>
                        </div>
                        <div style="position:relative;top: 130px" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">奔驰C级</p>
                                <p class="car-series-tag">内饰顶奢</p>
                            </a>
                        </div>
                        <div style="position:relative;top: 130px;left: 196px;" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">奥迪A4L</p>
                                <p class="car-series-tag">性价比之选</p>
                            </a>
                        </div>
                    </div>
                    <div style="margin:-520px 0 0 796px" class="guide-car-series">
                        <div class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">奔驰S级</p>
                                <p class="car-series-tag">高雅奢华</p>
                            </a>
                        </div>
                        <div style="margin-left: 196px" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">普拉多</p>
                                <p class="car-series-tag">越野跨界生活</p>
                            </a>
                        </div>
                        <div style="position:relative;top: 130px" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">发现</p>
                                <p class="car-series-tag">LAND ROVER</p>
                            </a>
                        </div>
                        <div style="position:relative;top: 130px;left: 196px;" class="guide-car-series-item">
                            <a class="car-series-item-box" href="">
                                <p class="car-series-name">Macan</p>
                                <p class="car-series-tag">Porsche</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="car-list-wrapper">
                <div class="car-list-container">
                    <div class="car-list-container-title">
                        <span style="float: left;font-size: 22px;color: rgba(0,0,0,.8);text-shadow: 1px 1px 1px rgba(0,0,0,.20);">好车推荐</span>
                        <span style="float: left;width: 2px;height: 20px;background: rgba(0,0,0,.07);border-radius: 1px;margin: 5px 0 0 25px;"></span>
                        <div>
                            <el-menu :default-active="activeIndex" class="el-menu-demo2" mode="horizontal" @select="handleSelect">
                                <el-menu-item index="1">特价好车</el-menu-item>
                                <el-menu-item index="1">5万以下超值车</el-menu-item>
                                <el-menu-item index="1">5-10万超值车</el-menu-item>
                                <el-menu-item index="1">超值SUV</el-menu-item>
                                <el-menu-item index="1">急售降价车</el-menu-item>
                                </el-menu>
                        </div>
                        <div>
                            <div>
                                <el-row style="margin-left: -200px;width: 1200px;height: 690px;">
                                    <el-col :span="2" v-for="(item, index) in carArr" :key="item" :offset="index > 0 ? 4 : 4"class="">
                                        <el-card :body-style="{ padding: '0px' }"class="card-box">
                                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="card-box-image">
                                            <div style="padding: 14px;">
                                                <span>双向绑定</span>
                                                <div class="bottom clearfix">
                                                    <div><p class="card-box-time">双向绑定</p></div>
                                                    <div>
                                                        <p style="margin-top: 45px"><span style="font-size: 20px;color: coral;">价格
                                                    </span>
                                                            <span style="font-size: 14px;color: rgba(0,0,0,.36);">首付</span>
                                                            <span><el-button type="text" class="card-box-button">咨询</el-button></span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                                <div style="height: 46px;width: 170px;margin-left: 545px">
                                    <el-button type="info" size="medium" plain><a href="detail.html"style="
                                        text-decoration: none;color: rgba(0,0,0,.36)">查看更多!</a></el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 1200px;margin: 0 auto">
            <p style="margin-top: 30px">
                <span style="font-size: 24px;text-shadow: 1px 1px 1px rgba(0,0,0,.20);">
                交易流程
                 </span>
                <span style="float: left;width: 2px;height: 22px;background: rgba(0,0,0,.07);
                border-radius: 1px;margin-top: 5px;position:relative;left: 120px">
                </span>
                <span style="float: right;margin-top: 5px;font-size: 16px;
                    color: rgba(0,0,0,.6);">免费咨询电话:400-026-9017
                </span>
            </p>
        </div>
        <div class="car-flow-box">
            <input type="radio" name='select' id='slide_1' checked hidden>
            <input type="radio" name='select' id='slide_2' hidden>

            <div class="slider">
                <label for="slide_1" class='slide slider-1'></label>
                <label for="slide_2" class='slide slider-2'></label>
            </div>

            <div class="flow flow-1">
                <div class="img">
                    <img src="indexImage/buy.png" alt="">
                </div>

            </div>
            <div class="flow flow-2">
                <div class="img">
                    <img src="indexImage/sale.png" alt="">
                </div>
            </div>
        </div>

        <div class="end-show">
            <div class="end-show-box">
                <div class="end-show-content">
                    <img src="indexImage/RS7.jpg">
                    <span>RS7</span>
                </div>
                <div class="end-show-content">
                    <img src="indexImage/AMG.jpg">
                    <span>AMG</span>
                </div>
                <div class="end-show-content">
                    <img src="indexImage/911.jpg">
                    <span>911</span>
                </div>
                <div class="end-show-content">
                    <img src="indexImage/M8.jpg">
                    <span>M8</span>
                </div>
                <div class="end-show-content">
                    <img src="indexImage/R8.jpg">
                    <span>R8</span>
                </div>
                <div class="end-show-content">
                    <img src="indexImage/Quattroporte.jpg">
                    <span>Quattroporte</span>
                </div>
            </div>
        </div>
    </el-container>



    <div id="r-footer">
        <div class="r-footer-container">
            <div class="baozhang"></div>
            <div class="link-clearfix">
                <div class="link-left">
                    <div class="link-left_item">
                        <div class="link-left_item-title">关于我们</div>
                        <ul>
                            <li><a href="">公司介绍</a></li>
                            <li><a href="">联系我们</a></li>
                            <li><a href="">加入我们</a></li>
                            <li><a href="">加盟合伙人</a></li>
                        </ul>
                        <ul>
                            <li><a href="">用户服务协议</a></li>
                            <li><a href="">隐私政策</a></li>
                            <li><a href="">法律声明</a></li>
                            <li><a href="">协议及声明</a></li>
                        </ul>
                    </div>
                    <div class="link-left_item" style="width: 140px">
                        <div class="link-left_item-title">交易流程</div>
                        <ul>
                            <li><a href="">买车流程</a></li>
                            <li><a href="">卖车流程</a></li>
                            <li><a href="">异地购车</a></li>
                        </ul>
                    </div>
                    <div class="link-left_item">
                        <div class="link-left_item-title">二手车精选</div>
                        <ul>
                            <li><a href="">车型库</a></li>
                            <li><a href="">二手车资讯</a></li>
                            <li><a href="">二手车问答</a></li>
                        </ul>
                        <ul>
                            <li><a href="">二手车估价</a></li>
                            <li><a href="">二手车迁入标准</a></li>
                        </ul>
                    </div>
                </div>
                <div class="link-right">
                    <div class="link-right_tel">
                        <div class="number">400-039-6051</div>
                        <div class="time">周一至周日 9:00-18:00</div>
                        <div class="text">免费咨询(咨询、建议、投诉)</div>
                    </div>
                    <div class="link-right_app">
                        <div class="r-item">
                            <span>关注微信</span>
                            <div class="lazyload">
                                <img src="salecar_img/wechat.jpg" alt="" style="width: 100%;">
                            </div>
                        </div>
                        <div class="r-item">
                            <span>下载APP</span>
                            <div class="lazyload">
                                <img src="salecar_img/down-app.png" alt="" style="width: 100%;">
                            </div>
                        </div>
                    </div>
                    <div class="link-right_sns">
                    </div>
                </div>
            </div>
        </div>
        <div id="r-footer-copyright">
            <div class="r-footer-copyright-container">
                <img src="salecar_img/wangbei.png" alt="" >
            </div>
        </div>
    </div>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                dq: "海曙区",
                restaurants: [],
                state1: '',
                info:'',
                input: '',
                carArr: [{name:'宝马', type: 1},{name:'奔驰', type: 2},{name:'本田', type: 3},{name:'丰田', type: 4},
                    {name:'奥迪', type: 5},{name:'保时捷', type: 6},{name:'路虎', type: 7},{name:'野马', type: 8}]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                location.href = "/index.html?dq=" + key;
                console.log(key, keyPath);
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },

            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "奔驰C级"},
                    {"value": "奔驰E级"},
                    {"value": "奔驰GLC"},
                    {"value": "奔驰GLE"},
                    {"value": "奔驰S级"},
                    {"value": "迈巴赫"},
                    {"value": "奥迪A4L"},
                    {"value": "奥迪A6L"},
                    {"value": "奥迪Q5L"},
                    {"value": "奥迪A8"},
                    {"value": "奥迪R8"},
                    {"value": "宝马3系"},
                    {"value": "宝马5系"},
                    {"value": ""},
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        },
        created: function () {
            if (location.search.indexOf("dq=") != -1) {
                let dqs = location.search.split("dq=");
                let dq = dqs[1];
                this.dq = dq;
            }
        },

    })


</script>
</html>